import useStore from '@/context/useStore';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { Tree, Input, Button, Rate } from 'antd';
import { FormOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons';
import Editor from 'for-editor'
import styles from "./SkillDescription.less"
import {SaveOutlined} from "@ant-design/icons"

const { Search } = Input;
interface IProps {
    stationVersionId: string
}
const rates = ['', '了解', '熟悉', '掌握'];

const SKillDescriptionV2: React.FC<IProps> = props => {
    const { station } = useStore();
    const [currentSkillId, setCurrentSkillId] = useState('');
    const [isEdit, setIsEdit] = useState(false);


    useEffect(() => {
        station.selectSkillList(props.stationVersionId);
    }, [])

    useEffect(() => {
        if (currentSkillId) {
            station.getStationSkillDetail(currentSkillId);
        }
    }, [currentSkillId]);

    // 在树的尾部追加一项
    function addDescription() {
        station.inintSkill(props.stationVersionId);
    }

    // 在当前树增加一个子树
    function addChildDescription(parentId: string) {
        station.inintSkill(props.stationVersionId, parentId);
    }

    // 从父树中删掉当前树
    function removeChildDescription(skillId: string) {
        station.deleteSkill(skillId);
    }

    return <div  className={styles.skilldescription}>
        {/* 成功之后给个提示 */}
        <section>
           <section className={styles.lefthead}>
                <Search style={{ marginBottom: 8 }} placeholder="清输入内容" />
                <span onClick={()=>addDescription()}>+</span>
            </section>
            <Tree className={styles.leftcon}
                autoExpandParent={true}
                treeData={station.skillList}
                titleRender={(nodeData:any)=>{
                    return <p onClick={()=>setCurrentSkillId(nodeData.id)}>
                        {
                            isEdit && currentSkillId===nodeData.id ? <input type='text' value={station.skillDetail.skillName} onKeyDown={e=>{
                                if(e.keyCode===13){
                                    station.putSkill();
                                    setIsEdit(false);
                                }
                            }} onChange={e=>station.modifySKillDetail({skillName: e.target.value})} />
                            : <span>{currentSkillId===nodeData.id ?station.skillDetail.skillName: nodeData.label}</span>    
                        }
                        <FormOutlined onClick={()=>setIsEdit(true)} />
                        <PlusOutlined onClick={()=>addChildDescription(nodeData.id)}/>
                        <MinusOutlined onClick={()=>removeChildDescription(nodeData.id)}/>
                    </p>
                }}
            />
        </section> 
        
        {/* 右边平分项和md编辑器 */}
        <section>
            <Button type="primary" icon={<SaveOutlined />} onClick={()=>station.putSkill()}>保存</Button>
            <div className={styles.righttitle}>
                <h3>掌握要求</h3>
                <Rate count={3} value={station.skillDetail.masterRequired} defaultValue={1} onChange={value=>station.modifySKillDetail({masterRequired: value})}/>
                <span className="ant-rate-text">{rates[station.skillDetail.masterRequired]}</span>
                <span>一星到三星分别代表了解、掌握、精通3个级别</span>
            </div>
            <div className={styles.rightcon}>
                <h3>能力标准</h3>
                <Editor value={station.skillDetail.abilityStandard || ''} onChange={value =>station.modifySKillDetail({abilityStandard: value})}/> 
            </div>
        </section>
    </div>
}

export default observer(SKillDescriptionV2);